<template>
    <div class="my_discovery">
        <!-- 轮播图区域 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="200px" />
            </van-swipe-item>
        </van-swipe>

        <!-- 宫格导航区域 -->
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="item in gridData" :key="item.id" @click="grid(item.id)">
                <van-image :src="item.imgUrl" height="40px" />
                <div class="grid_text">{{ item.text }}</div>
            </van-grid-item>
        </van-grid>

        <!-- 发现好歌单 -->
        <div class="music_list">
            <div class="text">发现好歌单</div>
            <van-button plain round type="default" size="small" @click="clickMany">
                <span>查看更多</span>
            </van-button>
        </div>

        <!-- 歌单列表 -->
        <van-row :gutter="[20, 20]">
            <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
                <img :src="item.musicImg" alt="" width="100%" height="180px">
                <div class="text">{{ item.auth }}</div>
            </van-col>
        </van-row>

        <!-- 圆角弹窗（底部） -->
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
            <div class="many_title">歌单广场</div>
            <van-row :gutter="[20, 20]">
                <van-col span="12" v-for="item in musicMany" :key="item.id" @click="toMusicMany(item.id)">
                    <img :src="item.musicImg" alt="" width="100%" height="180px">
                    <div class="text">{{ item.auth }}</div>
                </van-col>
            </van-row>
        </van-popup>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router';

let showBottom = ref(false)
// 宫格数据
const gridData = ref([
    { id: 1, imgUrl: 'https://img2.baidu.com/it/u=2623690425,3595147264&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', text: "每日推荐" },
    { id: 2, imgUrl: 'https://5b0988e595225.cdn.sohucs.com/images/20170825/b63962c037f842e08d5623ec1fde742b.jpeg', text: "私人FM" },
    { id: 3, imgUrl: 'https://img1.baidu.com/it/u=3871413624,4265197873&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800', text: "歌单" },
    { id: 4, imgUrl: 'https://img2.baidu.com/it/u=1583633742,1087138895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', text: "排行榜" },
])

// 歌单数据
const musicList = ref([
    { id: 1, musicImg: 'https://img0.baidu.com/it/u=1107630951,3048793888&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1731', auth: '抖音热曲' },
    { id: 2, musicImg: 'https://img1.baidu.com/it/u=2866221952,3437101684&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', auth: '舒心治愈系钢琴曲' },
    { id: 3, musicImg: 'https://img2.baidu.com/it/u=3606101739,3274350950&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083', auth: '咖啡下午茶' },
    { id: 4, musicImg: 'https://img0.baidu.com/it/u=1910650732,3208915594&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500', auth: '自然 露营'}
])

// 轮播图静态数据
const images = [
    'https://img2.baidu.com/it/u=2784433781,4090796287&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=440',
    'https://img2.baidu.com/it/u=2168859313,139961920&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=183',
    'https://img1.baidu.com/it/u=143767508,1166280067&fm=253&fmt=auto&app=138&f=JPEG?w=1140&h=418'
];

//查看更多数据
const musicMany = ref([
    { id: 1, musicImg: 'https://img1.baidu.com/it/u=2784017017,961885214&fm=253&fmt=auto&app=120&f=JPEG?w=418&h=524', auth: '一键开启好心情' },
    { id: 2, musicImg: 'https://img0.baidu.com/it/u=4109931953,1006256245&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', auth: '为你打造专属华语热歌' },
    { id: 3, musicImg: 'https://img2.baidu.com/it/u=3715324866,1551068885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1565', auth: 'DJ劲爆嗨曲' },
    { id: 4, musicImg: 'http://t13.baidu.com/it/u=172609151,647865823&fm=224&app=112&f=JPEG?w=500&h=500', auth: '五月天' }
])


//跳转到宫格
const musicGrid = (id) => {
    console.log('跳转宫格详情', id);
}

const grid = (id)=>{
    router.push({name:id === 1?'suggest':id === 2?'fm':id === 3?'sing':'rank'})
}

// 跳转歌单详情页面
const toMusicList = (id) => {
    console.log('跳转歌单详情', id);
}

// 点击查看更多
const clickMany = () => {
    console.log('点击了查看更多');
    showBottom.value = true
}

// 更多歌单
const toMusicMany = (id) => {
    console.log('点击更多歌单',+id);
}



</script>
<style scoped>
.my_discovery {
    margin-top: 10px;
    padding: 0 10px;
    height: calc(100vh - 110px);
    overflow-y: scroll;
}

.grid_text {
    font-size: 15px;
}

.music_list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.music_list .text {
    color: #000;
    font-size: 18px;
    font-weight: 600;
}

.music_list span {
    color: #000;
}
.many_title{
    text-align: center;
    font-size: 22px;
    font-weight: bolder;
    position: sticky;
    top: 0px;
    right: 20px;
    padding-top: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    height: calc(10vh - 10px);
    overflow-y: scroll;
}
.text{
    text-align: center;
    font-size: 15px;
}

</style>